<template>
  <el-dialog
    :model-value="dialogVisible"
    title="产品明细列表"
    width="60%"
    draggable
  >
    <el-form ref="baseFormRef" :model="baseFrom" label-position="left">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="品牌">
            <el-input v-model="baseFrom.name" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品编码/名称">
            <el-select
              v-model="baseFrom.code"
              placeholder="Please select a zone"
            >
              <el-option label="Zone No.1" value="shanghai" />
              <el-option label="Zone No.2" value="beijing" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品类目">
            <el-select
              v-model="baseFrom.name"
              placeholder="Please select a zone"
            >
              <el-option label="Zone No.1" value="shanghai" />
              <el-option label="Zone No.2" value="beijing" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <div class="flex_end">
            <el-button type="primary" @click="handleForm(baseFormRef)">
              查询
            </el-button>
            <el-button @click="handleForm(baseFormRef)">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <vab-table
      tableHeight="360"
      :page="data.page"
      :loading="data.loading"
      :listData="data.tableData"
      :columnsList="data.tabCloum"
      editIsNeed
      @handleCurrent="handleCurrent"
      @handleSize="handleSize"
      @handleEdit="handleEdit"
    ></vab-table>
    <template #footer>
      <div class="dialog-footer flex_center">
        <el-button type="primary" @click="handleDialog('Confirm')">
          确认
        </el-button>
        <el-button @click="handleDialog('Cancel')">返回</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
defineProps({
  dialogVisible: {
    type: Boolean,
    default: true,
  },
})

interface RuleForm {
  brand: string
  code: string
  name: string
}
const baseFormRef = ref<FormInstance>()
const baseFrom = reactive<RuleForm>({
  brand: '',
  code: '',
  name: '',
})

const data: any = reactive({
  loading: false,
  page: {
    pageNum: 1,
    pageSize: 10,
    total: 20,
  },
  tableData: [
    {
      s1: '222',
      s2: '333',
      s3: 's3s3s3s3s3s3s3s3s3s3s3s3s3s3s3s3s3s3s3s3',
      s4: '444',
      s5: '1689819734',
      s6: '22.01',
    },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
    { s1: 's1', s2: 's2', s3: 'aaaa', s4: 's4', s5: 's5', s6: 's6' },
  ],
  tabCloum: [
    { label: '设备编号', prop: 's1', type: 'number' },
    { align: 'right', label: '设备名称', prop: 's2', type: 'money' },
    { align: 'right', label: '区域名称', prop: 's3', ellipsisyi: 'ellipsis' }, //ellipsis预留移入显示
    {
      label: '街道名称',
      prop: 's4',
      align: 'center',
      render: (row: any) => {
        if (row.s4 == '1') {
          return "<div style='color: red;'>街道1</div>"
        } else {
          return "<div style='color: yellowgreen;'>街道2</div>"
        }
      },
    },
    { align: 'right', label: '站点名称', prop: 's5', type: 'time' },
    { align: 'right', label: '挂载设备数量', prop: 's6', type: 'ratio' },
  ],
})

const emit = defineEmits(['handleDialog'])

const handleDialog = (value: string) => {
  if (value == 'Cancel' || value == 'Confirm') {
    emit('handleDialog', false)
  }
}
const handleCurrent = (value: any) => {
  data.page.pageNum = value
  console.log(value, '**handleCurrent**')
  getAPI()
}
const handleSize = (value: any) => {
  data.page.pageSize = value
  console.log(value, '**handleSize**')

  getAPI()
}
const handleEdit = (index: number, row: any) => {
  console.log('编辑--》', index)
}
// 模拟请求接口
const getAPI = () => {
  data.loading = true
  setTimeout(() => {
    data.loading = false
  }, 1000)
}

const handleForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style scoped></style>
